<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸[溢出]与单位</title>
		<style>
			/* 单位: px %  PC端 */
			/* div{
				width: 100%;
				height: 200px; /* 高度  ???  div: 区域 有宽没高 */
				/*
				background: red;}
			/*
			
			/* overflow 溢出属性  主要解决浮动塌陷*/
			div{
				width: 400px;
				height: 200px;
				border: 1px solid red;
				/* overflow: hidden; */  /* 溢出: 隐藏 hidden */
				/* overflow: scroll; */  /* 溢出: 滚动条 scroll */
				/* overflow: auto; */    /*溢出: 自动加滚动条 auto*/
				/* overflow-x: scroll; */      /* 溢出: 横向纵向滚动条 -x -y */
				/* overflow-y: scroll; */
				overflow-x: scroll;
				overflow-y: hidden;
				
				
			}
			p{
				width: 800px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		
		<!-- div理解为水杯 -->
		<div>
			<!-- p理解为水 -->
			<p>
				<img src="img/p_small_001.jpg" alt="1">
				<img src="img/p_small_002.jpg" alt="2">
				<img src="img/p_small_003.jpg" alt="3">
				<img src="img/p_small_004.jpg" alt="4">
				<img src="img/p_small_005.jpg" alt="5">
				<img src="img/p_small_006.jpg" alt="6">
				<img src="img/p_small_007.jpg" alt="7">
			</p>
		</div>
		
		<!-- <div></div> -->
	</body>
</html>